---
// Click button, get confetti!
// Styled by Tailwind :)
---

<button
  id="confetti"
  class="appearance-none py-2 px-4 bg-purple-500 text-white font-semibold rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75"
>
  <slot />
</button>

<script>
  import confetti from "canvas-confetti";
  const button = document.body.querySelector("#confetti");

  if (button) {
    button.addEventListener("click", () => confetti());
  }
</script>
